<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Aether : Test Suit</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<style type="text/css">
			body {
				font-size: 62.5%;
				font-family: Verdana;
			}

			p, code {
				font-size: 1em;
			}

			input,
			textarea,
			select,
			label {
				position: relative;
				text-align: left;
				outline: 0;
				padding: .4em;
				margin-right: .4em;

				font-size: 1.1em;

				display: -moz-inline-stack;
				display: inline-block;
				zoom: 1;
				*display: inline;
			}

			input {
				width: 12em;
			}

		</style>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../ui.formvalidation.js"></script>
	</head>

	<body>

		<h3>Demo One : text - is required</h3>

		<label for="demo_1">Demo 1</label>
		<input type="text" name="demo_1" id="demo_1" value="" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_1" id="demo_1_hint" />').insertAfter('#demo_1');
				$('#demo_1').formvalidation({
					required: true
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Two : number - not required</h3>

		<label for="demo_2">Demo 2</label>
		<input type="text" name="demo_2" id="demo_2" value="" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_2" id="demo_2_hint" />').insertAfter('#demo_2');
				$('#demo_2').formvalidation({
					type: 'number'
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Tree : number - is required</h3>

		<label for="demo_3">Demo 3</label>
		<input type="text" name="demo_3" id="demo_3" value="" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_3" id="demo_3_hint" />').insertAfter('#demo_3');
				$('#demo_3').formvalidation({
					type: 'number',
					required: true
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Four : email validate</h3>

		<label for="demo_4">Demo 4</label>
		<input name="demo_4" id="demo_4" type="email" value="tester@example.com" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_4" id="demo_4_hint" />').insertAfter('#demo_4');
				$('#demo_4').formvalidation({
					type: 'email'
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Five : url validate</h3>

		<label for="demo_5">Demo 5</label>
		<label for="demo_5">Enter a valid URL: </label>
		<input name="demo_5" id="demo_5" type="url" value="http://www.google.com/m" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_5" id="demo_5_hint" />').insertAfter('#demo_5');
				$('#demo_5').formvalidation({
					type: 'url'
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Six : inline Fields</h3>

		<p>This is some text before the <code>ui.formvalidation</code> widget <input type="text" name="demo_6a" id="demo_6a" value="" />  this is some text after the <code>ui.formvalidation</code> widget
			<input type="text" name="demo_6b" id="demo_6b" value=""/> and that was a normal input element.</p>

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_6a" id="demo_6a_hint" />').insertAfter('#demo_6a');
				$('#demo_6a').formvalidation({
					type: 'number'
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<h3>Demo Five : pattern validate</h3>

		<label for="demo_7">Demo 7</label>
		<label for="demo_7">Enter a valid URL: </label>
		<input name="demo_7" id="demo_7" type="url" value="http://www.google.com/m" />

		<script type="text/javascript">

			$(function() {
				var hint = $('<label for="demo_7" id="demo_7_hint" />').insertAfter('#demo_7');
				$('#demo_7').formvalidation({
					type: 'url'
				}).bind('formvalidation', function(event, ui) {

					var message = '';

					if (ui.errors) {
						$.each(ui.errors, function(name, val){
							if (message !== '')
								return;

							if (name !== 'valid')
								message = val;
						});
					}

					hint.text(message);
				});
			});

		</script>

		<hr />

		<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
		<script type="text/javascript">
			<!--
				_uacct="UA-359169-1";urchinTracker();
			//-->
		</script>
		<script src="http://pmetrics.performancing.com/3702.js" type="text/javascript"></script>
		<noscript><p><img alt="Performancing Metrics" src="http://pmetrics.performancing.com/3702ns.gif" /></p></noscript>
	</body>
</html>